Hace tiempo añadí una imagen justo al final del blog en el lateral derecho aún sigue ahí aunque la imagen la fui cambiando, se trata de una imagen que se fija al fondo y crea un efecto deslizante que nos lleva a inicio, poco después ese mismo efecto lo añadía en el footer de las entradas.
La idea de ese efecto surgió a raíz de unas explicaciones de J.Miur y posteriormente en esta entrada explicaba los pasos a seguir para añadir dicho efecto.
Voodoo me pregunta como añadir no una sino dos imágenes al final del blog, una que se deslice hacia arriba y otra que se deslice abajo, la idea es buena y los resultados quedan estéticamente agradables.
Antes de añadir las imágenes necesitamos incluir en la plantilla Prototype y los efectos de Scriptaculous lo conseguiremos añadiendo justo antes de </head> lo siguiente (si lo añadimos anteriormente para algún otro efecto no será necesario añadirlo otra vez)

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>

Guardamos los cambios para no modificar nada sin darnos cuenta y nos situamos al final de la plantilla justo antes de </body>(no es necesario expandir la plantilla) allí añadimos lo siguiente:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Subir' border='0' src='url-imagen-subir' style='position:fixed; bottom:0; right:0;'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Bajar' border='0' src='url-imagen-bajar' style='position:fixed; bottom:40px; right:0;'/></a>

Donde url-imagen-bajar añadimos la imagen que hace la función de bajar.
En url-imagen-subir añadiremos la url de la imagen que hace la función de subir.
Entre las dos imágenes podemos dejar mayor o menor espacio, lo podemos modificar en la imagen de "bajar" donde dice bottom:40px; aumentando o disminuyendo ese valor.
Una aclaración, a más distancia entre footer y outer-wrapper mejor apreciación del efecto.


Este es el resultado también pueden verlo en funcionamiento en el blog de Voodoo donde el efecto se ve con más claridad debido a ese mayor espacio entre footer y outer-wrapper que antes comentaba

LokoGB

Gracias, muchas gracias Gem@ :D ... porcierto tengo una duda, por ejemplo, como hago para que ese boton de ir hacia arriba aparesca solo cuando ya este casí al final del blog ¿Se puede?

Responder
Jessica

Gem@, gracias por esta entrada. Era justo lo que andaba buscando!

Sin embargo, aun no me funciona el efecto desliznte, aunque puse los dos scripts que indicastes. Solo me brinca de zopeton hacia arriba o abajo, pero nada sutil, como el tuyo.

Que podra ser?>

Responder
Antony

Es super bueno. ;) Gracias por compartirlo. Saludos! :)

Responder
Gem@

yz Hola LokoGB,sería suficiente con cambiar position:fixed por position:absolute como ya está ubicada a la derecha quedará justo al final del blog :)

yz Jessica no es culpa tuya, ha sido un error al convertir el código para mostrado, lo siento.
Prueba ahora ;)

yz Me alegra que te guste Antony :)

Responder
Unknown

Gracias Gema un buen aporte, lo buscaba como loco, tenia uno pero me subia a golpe, este es genial gracias.
para verlo que tal quedo pasar:
http://the-genuine.blogspot.com

Responder
Gem@

yz Quedó muy bien The Genuine con los Sticker de fútbol :)

Responder
Jessica

Gem@, sigue sin funcionarme el efecto deslizante. q es lo q tengo q cambiar?

Responder
enrique

A mi tampoco me funciona el efecto deslizante, Gema, y eso que ya he seguido con mucho cuidado tus instrucciones.

Responder
enrique

Y otra preguntita, Gema: cómo puedo pasar el Leer Más que tengo instalado en mis entradas para que aparezca no a la izquierda sino a la derecha del post?
Hay alguna manera?
Muy agradecido. ;)

Responder
simour

gema te hago una consulta...
necesito mostrar un numero determinado d fotos en un hider.... x ejemplo 10 fotos al azar habiendo muchas mas disponibles ... se entiende lo q pretendo?...

Responder
Raúl Montero

hace tiempo que tengo el mio instalado!

muy bueno el post.

Responder
Antonio Ruiz

Fenomenal Gema, una vez más. Muchas gracias por todo lo que nos enseñas a diario. El efecto ha quedado magnífico en mi blog.

Saludos.

http://naturalezayviajes.blogspot.com

Responder
yolanda

HOLA GEMA!
ES LA PRIMERA VEZ Q ESCRIBO PERO NO LA QUE VEO TU BLOG.

EN MI BLOG TENGO PUESTO YA EL EFECTO DE SUBIR ARRIBA PERO NO EL DESLIZANTE,que me encanta,debo de quitar primero el anterior o al poner se veria el efecto?
voy controlando mas o menos esto gracias a tu ayuda y la de Rosa,pero me faaaalta mucho aun.
muchas gracias gema!
yolanda
http://yolandafrica.blogspot.com/

Responder
Alca

hola Gem@, me encanta tu blog, es muy bonito y desde que lo descubrí, me está siendo utilísimo.

he intentado poner este efecto, que me encanto al entrar en tu blog, y de momento me sube y baja a salto de caballo sin el efecto.
No sé que podrá fallar.
¡¡GRACIAS!!

Responder
E-migrad@

Hola Gem@

Me gustó mucho este efecto, voy a ver como queda en el blog de pruebas :P

El nuevo diseño del blog es sencillo, elegante... me gusta mucho. Felicidades!

Cuando puedas pasa por este post de Migraciones Internas, vale?:

http://migraciones--internas.blogspot.com/2009/04/los-blogs-que-leo.html

Un beso y buena tarde de martes, E-migrad@

Responder
Gem@

yz Hola Jessica hay un error en tu código, donde dice #footer-column-container... sustitúyelo por #footer-wrapper en ese mismo código hay otro error donde dice new Effect.ScrollTo("#footer-column-container",{offset esta vez hay que añadirlo sin el asterisco footer-wrapper. Cópialo de la entrada y añade las imágenes te resultará más cómodo ;)

yz Lo siento Enrique pero no he podido ver tu blog, no sé donde puede estar el error.
Tampoco sé el sistema de leer más que tienes añadido, hay varias formas de mostrar un contenido oculto :(

yz Simour pues la verdad muy bien no lo entiendo ¿a qué te refieres con un hider.... x ?
¿imágenes aleatorias sin más o al recargar la página?

yz Gracias Raúl Montero, lo vi e tu blog el otro día sin embargo no aprecio el efecto deslizante ¿añadiste el segundo script?

yz Gracias Antonio Ruiz, se ve tu blog muy bien con Explorer veo que aquellos problemas con las imágenes los solucionaste ;)

yz Hola Yolanda, hay que sustituirlo, el otro no tiene ningún efecto es un enlace dentro de la misma página que nos lleva donde le indicamos.
Puedes conservar la misma imagen y seguir los pasos de esta entrada ;)

yz Saludos Alca, prueba a añadir los scripts antes de </head> en lugar de después ;)

yz Hola E-migrad@ gracias por el comentario, pasaré ya mismo )

Responder
Anónimo

Muchas gracias Gema! que precioso efecto produce, ya lo he instalado con éxito!

Conoces alguna galería de imágenes donde pueda conseguir flechas o letras como la tuya?

Muy agradecido!

Responder
Gem@

Hola Fero, me alegra que te guste el efecto y resultara bien, las imágenes que añadí han sido un obsequio de Voodoo y la verdad que me encantan y quedan muy bien en el blog, sobre alguna página donde conseguir flechas tipo sticker mira aquí http://gemablog-.blogspot.com/2009/04/iconos-sticker.html los iconos de David Lanham son lo que más se acerca a eso ;)

Responder
enrique

Ya puedes ver mi blog, Gema, te agradezco cualquier consejillo.

Responder
Anónimo

Hola de nuevo Gema!
Muchas gracias por los enlaces, edité una de las imágenes y me quedó muy interesante. :) :)

Quería que la vieras:
desvariosdeunartista.blogspot.comMuchas gracias!!! ya veré que coloco después :)
Me ha encantado. Gracias.

Responder
Gem@

yz está todo correcto Enrique, pero al parecer crea problemas con los enlaces tipo a herf, inténtalo sustituyendo el código donde añades las imágenes por el siguiente.

<a
onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false' href="#outer-wrapper">
<img alt='Subir' border='0' src='url-imagen-subir' style='position:fixed; bottom:0; right:0;'/>
</a>


<a
onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false' href="#footer-wrapper">
<img alt='Bajar' border='0' src='url-imagen-bajar' style='position:fixed; bottom:40px; right:0;'/>
</a>

Sobre el sistema de leer más, creo que es este no estoy muy segura...
http://gemablog-.blogspot.com/2007/07/leer-ms-con-efecto-expandir-y-recoger.html
La solución es suprimirlo realizando los pasos a la inversa es decir añadiendo lo que eliminaste y suprimiendo lo que añadiste, todo eso haciendo antes una copia de la plantilla por si se comete algún error y antes de guardar los cambios mira en vista previa.
Mirando en vista previa no verás el resultado pero sabrás si es posible guardar la plantilla ;)

Responder
Anónimo

El problema que noto en mi imagen gema, es que en pantallas mas pequeñas que la mía, es posible que la imagen entorpezca un poco la barra lateral. Pero, bueno es una prueba. :)

Gracias (again)

Responder
Gem@

yz Fero ¡que bonitaaaa!!! me encanta de verdad :) :) :) se ve muy personal y original.

Responder
Gem@

yz Se cruzan los comentarios Fero :) el tema del tamaño lo puedes solucionar si reduces la imagen, puedes probar, a lo mejor incluso queda mejor y se seguirá viendo porque queda fija al fondo.
Me encantan esos colores :)

Responder
Anónimo

Gema: ¿Hay alguna forma de editar el tamaño de la imagen desde el código? ¿o tengo que subir la imagen de nuevo? Yo quité la primera parte del código para que me quedara solo el efecto subiendo.

:)

Responder
Gem@

yz Fero puede intentarse añadiendo en la parte de estilos algo así: height=100 width= 100 pero lo más práctico es reducir la imagen.
Aquí puedes reducir la imagen ;)

Responder
Voodoo

Estupenda entrada para un efecto guapísimo. Muchas gracias por toda la ayuda :D

Responder
Antonio Ruiz

Normal que se solucionen los problemas de mi blog y se vean bien con Explorer. Con una profe así... jeje!!!

Mil gracias

Responder
Gem@

yz Gracias a ti Voodoo :)

yz ¿dónde está la profe Antonio ? :) Gracias!!

Responder
simour

perdon gema me referia a la sidebar horizontal (me exprese mal)
quiero en la sidebar poner imagenes con links, el tema es q tengo muchas imagenes, quiero elegir el numeros d imagemes q se valla a mostrar en la misma al azar.. como hago eso?
desde ya muchas gracias

Responder
Gem@

yz Simour mira si es esto lo que deseas hacer ;)

Responder
LokoGB

Gem@ perdona pero parece que el script deslizante ya no funciona en mi blog :( que puedo hacer?

Te dejo el link de mi blog (El Digerati)

Responder
Gem@

yz LokoGB no veo esa imagen en el blog que me dices, comprueba el código de la imagen parece que está incompleto.

Responder
albafoto

hola gema, estupendo efecto, pero soy otro problemático usuario de tu blog, lo he hecho tal y como viene en el blog copiando y pegando y me da saltos a mí también, he realizado alguna soluciones que vienen en los comentarios pero no lo consiguo....

¿me puedes ayudar por favor?

Responder
albafoto

perdon como siempre olvidé poner mi blog

ah y muchas gracias por tu atención

http://albacete-fotos.blogspot.com/

Responder
Gem@

yz mojul8 tu código está correcto y funciona perfectamente en mi blog de pruebas, prueba quitando el script de jQuery que tienes al final y añádelo antes de </head> puede que el problema sea ese porque jQuery y Scriptaculous son dos librerías distintas y pueden crear conflictos entre sí :(

Responder
albafoto

Hola gema

pues lo he probado he quitado todo lo que tenía de la biblioteca jquery y sigue haciendo lo mismo.

muchas gracias por tu tiempo.

Responder
Gem@

yz mojul8 l oque hay que probar a quitar es el script :(
De todas formas me parece que es un problema que debas quitar jQuery por poner un efecto, es más yo creo que jQuery debe tener algo por el estilo para poder añadir el efecto deslizante.
Si alguien te puede orientar en ese sentido es Pizcos que utiliza la librería jQuery ;)
Pizcos Blog

Responder
Jessica

Gracias Gem@!

Segui las indicaciones que mencionastes, y las q le dijiste arriba a Fero. Pero, aun no me funciona el efecto desliznte. Que podra ser?

En mi caso, sustitui "footer-wrapper" por "footer-column-container" pues mi plantilla no vino con "footer-wrapper". Aun despues de hacer esos ajustes, solo me salta de arriba a abajo, pero sin el efecto deslizante. No se que estoy haciendo mal. :S

Gracias por tu ayuda, Gem@!

PS. Ahora me paso visitando tu blog mas a menudo, pues has escrito unos temas bien interesantes ultimamente! :D

Responder
albafoto

muy bien muchas gracias gema

Responder
Gem@

yz No hay de qué mojul8, cualquier otra cosa que pueda ayudarte házmelo saber :)

Responder
Gem@

yz Jessica prueba a añadir los scripts antes de </body> y me dices si resulta.

Responder
Jessica

Gem@, lo trate y nada aun. Debo tener un script maldito q conflija o algo.

Responder
Gem@

yz Jessica prueba a eliminar el segundo script y veamos si con esto funciona.
Es cuestión de ir probando porque también puede ser que estés usando otra librería y si usamos distintas librerías los scripts suelen crear conflictos.

Responder
Jessica

nope, sigue sin funcionar. Yo use JQuery para arreglar un problema q trajo mi plantilla en los comentarios. Puede que quizas eso cree el conflicto?

Bueno, cualquier otra sugerencia, te la agradezco de corazon.

Responder
Gem@

yz Sin duda es eso Jessica, son dos librerías distintas y eso puede ocasionar conflictos :(
Si estás usando jQuery no debes preocuparte este efecto o parecido también puedes usarlo pero a pesar de haber escrito algo sobre ella desconozco los efectos que se pueden conseguir.
Quien si puede ayudarte es Pizcos porque él también la usa ;)
http://humanossinsentido.blogspot.com/

Responder
Unknown

hola, me preguntaba si el efecto solo es posible añadirlo en blogger o en una pagina web tambien. porque lo he probado y no me funciona


la pagina es http://www.geocities.com/migue.hitt/

Responder
Gem@

yz No sabría decirte Miguel porque no sé como funciona Geocities :(

Responder
Unknown

aunque no lo digo por geocities,ya que solo lo uso para probar la pagina, lo digo porque en mi computador tampoco funciona con el efecto deslizante.

Responder
Gem@

¿Quieres decir que en Blogger no te funciona? en el de pruebas funciona perfectamente :O

Responder
Jabba

Llevaba tiempo pensando poner el efecto ese en el blog y hoy me he decidido. Genial explicación.

Te "tomo prestadas" las imágenes del ejemplo ;).

Gracias!

Responder
Gem@

yz Hola Jabba, gracias por el comentario.
Las imágenes son un regalito de Voodoo y las puedes tomar libremente así como cualquier otra que te guste ;)

Responder
Club Aldara Sport

Buenas yo tengo un problema con el efecto de bajar, subir me sube pero no me baja no se por que puede ser.

http://aldaraspruebas.blogspot.com/

Responder
Gem@

yz Club Aldara Sport no puede bajar si no añades el enlace a footer-wrapper, has puesto el mismo código dos veces a outer-wrapper, el que nos lleva a inicio.

Responder
Unknown

mi blog es junindance.blogspot.com
Saludos

Responder
Unknown

no puedo implementar la imagen que me lleva hasta el top de la pagina

Solo muestra la imagen pero no funciona el efcto

Me podrias ayudar
Saludos

Responder
Gem@

yz Saludos Master Dj prueba a mover el script justo antes de </head> y vemos si es eso.

Responder
D2U2

Buenas, he creado mi blog con la ayuda de la info q has publicado aca, me explico mejor:

- Uso el Red "White Template" de "2 Columnas"

- Use el "Leer más o Read More para todas las plantillas de Blogger" q explicaste aqui "http://gemablog-.blogspot.com/2007/01/leer-ms-o-read-more-para-todas-las.html"

Ahora bien, trate de usar esta guia para colocar una imagen flotante en la parte inferior derecha del blog q al hacer click deslic hacia la parte superior de mi blog, hice todo al pie de la letra como lo explicas aca y sin embargo al hacer click en la imagen solo se le agrega a la URL esto "#outer-wrapper" sin moverse hacie arriba ni actualizar la web ni nada, me gustaria q me dijeras cual es mi error o xq no me esta funcionando esto, muchas gracias por todo.. salu2 ;)

Responder
D2U2

Huy me equivoque no use ese.. use fue este:

"http://gemablog-.blogspot.com/2006/12/leer-ms-read-more-nuevo-blogger.html"

Responder
Gem@

yz D2U2 el sistema de leer más no tiene por qué influir en el efecto de ir a inicio, comprueba si añadiste el script.
El efecto no actualiza la página sino que nos lleva a inicio de ella ;)

Responder
Admin

Ahora siiiii!!! :D Me salió bien, mejor que antes en la vieja plantilla, aunque me parece que tendría que achicar un poquito la imagen, no es un poco grande? Y bueno para los que no tengan buena vista como yo jajaaa
Pero funciona bien, hace el efecto deslizante, todo muy bonito :D
Mil gracias Gem@ ;)

Responder
Gem@

yz ¡Bien k_nelita!! :D :D :D
(Un poco grandecita si que es)

Responder
Admin

Ahora la achico, te gustaron las imagenes o iconos de navegación? Esos si están finos no?

Responder
Gem@

yz Me gustan ¿no hay del mismo modelo para ir a inicio?

Responder
Admin

No, que bronca, esas imagenes tienen fondo blanco, yo las edité para que se fundieran con el fondo de la plantilla, pero para ir a inicio no puedo, tiene que ser transparente el fondo :(
Pero algo haremos, ya achiqué la flechita, pero tengo otra que me gusta y la voy a probar aunque no tiene nada que ver con nada ja jaaa

Responder
Anónimo

pude hacer que funcione, me estaba volviendo loco, no se porque pero cuando pegaba el script antes de /head no funcionaba, lo tuve que pegar despues de head para que funcione.

Responder
Gem@

yz Normalmente se dice que se añada antes de </head> pero si no funciona o interfiere con otros scripts puede estar después de <head> incluso antes de </body>

Responder
Anónimo

una nueva consulta, sabes como hacer para que la imagen, por ejemplo la que dice top/\ para ir arriba, aparezca por encima de los videos de youtube?, porque cuando muevo el scroll por el blog cuando hay un video de youtube la cubre, con un video de otra web esto no sucede.

Responder
Anónimo

Disculpame Gem@ que te siga molestando, pero me surgio otra duda, como hiciste para que se puedan poner caritas en los comentarios cuando uno escribe algo asi :) :D :((, en mi blog solo aparecen los simbolos correspondientes, las caritas no se ven :(

Responder
Gem@

yz Eso es por el código que proporciona YouTube, no sabría decirte como solucionarlo, quizás Vagabundia pueda orientarte sobre ese tema:
http://vagabundia.blogspot.com/
Las caritas de los comentarios puedes ver como añadirlos en la siguiente url:
http://gemablog-.blogspot.com/2007/06/emoticones-segn-daleclikc.html
- Por favor la imagen de TOP descargala a tu PC para subirla con tu propia url ;)

Responder
Anónimo

tante grazie Gemit@, ya subi la imagen de top para obtener otra url, lo de los emoticons me andubo fenomeno, tuve que cambiar lo que decia ¨body¨ por coment-Block, para que me aparezcan solo en los comentarios, de otra manera se me tildaban los widgets de la sidebar que utilizaban flash. Saludos!

Responder
Gem@

yz Genial HE-MARVEL es un buen dato :)

Responder
Nico D

ahora si, lo habia logrado pero no conseguia con el efecto deslizante pero resulta que estaba en el post equivocado, con este encontre el elemento que me faltaba. gracias

Responder
Gem@

yz Me alegra que lo solucionaras Nico :D

Responder
Sam

Hola Gem@, mira te paso a comentar. Hice todo el proceso, (Solo el de subir, como en tu Blog e incluso use tu Imagen espero no te molestes, luego hare la mia con Photoshop).
El tema es que la imagen no se ve, solo aparece "SUBIR" en letras.

Talvez la imagen la tenga que subir en .JPG o .GIF o Talvez estoy mandandome alguna macana jeje! Me encantaria que me pudieras ayudar.

Saludos!

Responder
Sam

Gem@, Camarada! ya pude hacer andar el problema. Un amigo de un Blog me ayudo, el tema era que no tenia que usar la imagen hosteada desde un server de afuera del de Blogger, sino desde el mismo de Blogger. Por eso mi amigo me aconsejo copiar el link de la imagen de blogger y usar esa y funciono!

MUCHAS GRACIAS POR EL TUTO! :D

Responder
Gem@

yz Hola Sam, no coincido con la opinión de tu amigo, la imagen se muestra siempre que el archivo esté online. De todas formas es buena idea alojarla en Blogger pero mira bien si la imagen sigue alojada porque no se muestra ahora.
Si copias la url y la pegas en la barra del navegador verás que no se muestra la imagen :O

Responder
pureswing

hola gem y feliz año nuevo

tengo un problemtica con truco y es que cuando le doy click a la flechita abajo no hace nada, la de ir abajo esta perfecta. No creo que sea el código ya lo revise y es 100% igual que este tuyo.

por lo que creo que sea otra cosa en la plantilla.
desde ya muchas gracias y God Bless You:):)

Responder
Gem@

:: djzorro prueba a poner en lugar de a href='#footer-wrapper' únicamente a href='#footer'

Responder
pureswing

Muchas gracias Gem hice el arreglo y asi me quedo

<a href='#footer' onclick='new Effect.ScrollTo(&quot;footer&quot;,{offset:-140}); return false'>

working 100%

thanks and have a good day!

Responder
Gem@

:: Era de esperar porque tu plantilla no tiene footer-wrapper sino footer ;)

Responder
Santidd

Llevo unos días viendo y probando diferentes entradas de tu blog para hacer el mío, y gracias a ti he conseguido lo que pretendía.
Muchísimas gracias por tu ayuda Gem@.
http://santidd.blogspot.com/

Responder
Gem@

:: Gracias a ti por comentar Santi te ha quedado un trabajo estupendo, esa plantilla de Adriane es preciosa.
Yo soy de Murcia (Cartagena) y sorprendió que no sabía de la existencia de ese pueblo en Burgos :)

Responder
alán cabañas m.

No sabes de verdad cuanto te agradezco quedó sencillamente genial, no me gustó el diseño que le coloqué para ir hacia abajo, pero hacia arriba si, y me quedó más claro en este post que en el anterior en donde explicas sólo el ir hacia arriba, muchas Gracias Gema

Responder
Gem@

:: Me alegra esté solucionado ALÁN :)

Responder
Free Zone Vacations

Gem@, de verdad que eres un genio!!!... te felicito porque tienes un blog precioso y todo lo que implementas está impresionantemente bien hecho... pero sobre éste tema de la increíble imagen que nos estás compartiendo (TOP^), fíjate que cuando añado el código que nos proporcionas antes de /body, mi plantilla me dice: Element type "img" must be followed by either attribute specifications, ">" or "/>"
y no sé cómo arreglarlo... podrías ayudarme?
mil gracias!

Responder
Free Zone Vacations

Nota: y si le pongo img src="url_de_la_imagen"/ o sea, que lo cierro... entonces me aparece otro error en la plantilla y me dice: Element type "style" must be followed by either attribute specifications, ">" or "/>"
o sea que, cada vez que según yo "cierro" lo que me pide... me van saliendo otras cosas y el caso es que no puedo guardar mi plantilla, porque me aparecen lo errores que nunca acabo por cerrar.... ups!!!.... help me!!!!

Responder
Gem@

:: Free Zone Vacations el error debe ser la url de tu imagen porque el código está correcto y deja guardar la plantilla perfectamente :S

Responder
Alex Aguilar

Gem@, fíjate que estoy ayudando a un colega al diseño de su blog (también sobre vacaciones). Estoy haciendo pruebas sobre prácticamente el mismo nombre de un blog que tengo y que funciona perfectamente... claro que no tengo entradas, solamente una prueba.... pues estoy tratando de añadirle todos los artilugios y mañas que he aprendido (gracias a tí)...
He probado el poco espacio que hay de abajo para arriba, pero la famosa flecha lateral no responde y aparece en la barra de dirección de internet el #Wrapper que no viene al caso (creo yo)... puedes checar la página y decirme si detectas cuál es el error?... la dirección de la imagen está correcta, porque es la misma que utilizo en mis otras páginas (y disculpa si copié la tuya :S)... ya luego buscaré otra imagen... mira, la dirección de prueba es: http://zonalibrevacaciones.blogspot.com
Te comento lo del poco espacio, porque ya hice la prueba en mis otras páginas bajando poco espacio, y funciona perfecto... pero ésta no me quiere responder y quizás sea la plantilla que elegí... pero con las otras no he tenido problemas... qué estará ocurriendo?... salu2

Responder
Gem@

:: Añade dos o tres entradas más Alex y vemos si hace el efecto, recuerdo que utiliza un script de Scriptaculous y si utilizas otra librería como por ejemplo jQuery puede crear conflicto.

Responder
Alex Aguilar

Gem@... ya las añadí, pero sigue sin funcionar... de hecho te comento que a la hora de dar click en la flecha, aparece en la barra de direcciones parte del código (#wrapper)... no sé qué sucede...???? si quieres te mando la plantilla por correo... de hecho lo voy a hacer en éste momento, a ver si de casualidad detectas el error... me ayudas?... porfis, porfis, porfis!!!!!

Responder
Gem@

:: He probado en mi plantilla con tu código y funciona perfectamente, también he probado tu plantilla y está todo bien añadido, la única diferencia es que se trata de una plantilla muy distinta a las de Blogger viene todo de forma muy distinta como todas las plantillas adaptadas.
Siento no poder ayudarte Alex :S

Responder
Free Zone Vacations

Gem@, te paso el tip: contacté con tu colega JMiur... que entre tú y él me tienen verdaderamente asombrada, porque son unos GENIOS!!!... no sabes cuánto los admiro y sobre todo, cuánto aprecio que sean tan generosos y que compartan sus conocimientos con nosotros...
Y bueno, con respecto al famoso código, ya me dijo JMiur que tanto en el script, como en href dice outer-wrapper que es el ID de un DIV, que en ciertas plantillas (como la mía) no existe...
Entonces me dijo que debería utilizar alguno de los que tengo, por ejemplo container:
new Effect.ScrollTo('container',{offset:-140});return false y en el href=#'container'
Lo único es que sube un poco lento y no llega hasta el tope de arriba... quizás tú sepas cómo le hago para solucionarlo... pero la famosa flecha de subir, ya funciona :D
Te lo comparto y nuevamente te agradezco todo tu apoyo!!!

Responder
Gem@

:: Pues sigo en las mismas Alex esa plantilla es adaptada y no es tan sencillo aplicar cambios como en una original de Blogger.

Responder
Free Zone Vacations

Gem@... ya pude!... me comentó JMiur que en lugar de "container", pusiera header y resultó!!!... te lo comento y comparto, pues tanto tú como él se complementan muy bien en conocimientos... también Rosa...
Muchísimas gracias Gem@... te mando un abrazo!

Responder
Gem@

:: Estupendo Alex :)

Responder
Unknown

Gracias Gema, tenía el mismo problema que djzorro y gracias a tus explicaciones lo he podido solucionar y ya me funcionan las dos flechitas.
Eres un sol :)

Responder
Gem@

:: Me alegra que encontraras la solución Nuria siempre digo que los comentarios son una gran fuente de información :)

Responder
Maniaco Cualquier Cosa

Gracias Gema, entre tu explicación y la de vagabundia pude lograrlo, ademas de esto tambien le agregue padding para que quedase distanciada de los bordes y quedo bien n.n

Responder
Gem@

:: Estupendo, me alegra que resultara bien :)

Responder
Alba Foto

Hola gema en mi blog he puesto este código pero sin que me haga el efecto deslizante, al principio no me funcionaban las flechas y modificando el código de la de arriba an #header-inner consegúi que me suba a la cabecera del blog, pero resulta que para que me baje a la zona que tengo los Widgets, con otros blogs de fotografía, etiquetas etc... no consigo de ninguna forma que me vaya directamente al darle a la flecha de abajo...

soy incapaz...

échame por favor una mano haber que código tengo que poner exactamente par que me funcione este..

a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Bajar' border='0' src='' style='position:fixed; bottom:40px; right:0


mi blog es....

http://fotografiasangelaroca.blogspot.com/


muchas gracias

Responder
Gem@

:: Ángel en lugar de footer-wrapper prueba con footer-outer y vemos si funciona :)

Responder
núria orbaneja

hola gema, te cogí este truco para mi blog de pruebas y asi ponerlo luego al original,,, me encanta como quedó, mi consulta es como puedo hacer para que las 2 flechitas me quedaran al final de los posts, que no llegaran hasta abajo.

muchas gracias

Responder
Gem@

:: Hola Nuria :) para qu ete quede en los post mira esta entrada:
http://gemablog-.blogspot.com/2008/02/ir-inicio-en-las-entradas-con-efecto.html

Responder
Raúl

Hola gem@ como estas, hice todas las indicaciones al pie de la letra pero no me funciona.

Que puede ser?

Gracias :)

Responder
Gem@

:: Lo veo funcionando perfectamente Raúl :S

Responder
Anónimo

He utilizado ese codigo pero una flecha se pone encima de otra!Que hago?

Responder
Gem@

:: Hola Jaled prueba a aumentar en bottom:0; por ejemplo en bottom:10px; si no te resulta déjalo añadido que pueda verlo :)

Responder
Anónimo
Este comentario ha sido eliminado por el autor.
Responder
Anónimo

Y otra cosa..Como hago que la flecha de arriba este arriba?

Responder
Anónimo

Oh!No funciona el link.Mi blog es este: http://defensoresdeben10.blogspot.com/

Responder
Gem@

:: Yo lo veo funcionando perfectamente Jaled, las dos flechas ;)

Responder
Anónimo

Esque las arregle con el codigo de Mundo Blogger :$

Responder
Anónimo

Ola Gem@,tuve que quitar las flechas porque no podia editar la Cabecera,pero ahora quiero volver a ponerlas y quiero que se vean asi: http://img833.imageshack.us/img833/2736/screenshot009o.png como puedo hacerlo? Gracias De Antemano

Responder
Gem@

:: Hola Jaled, la forma de ponerlas es la misma, la única diferencia es que la imagen de la flecha que apunta hacia arriba la añades en el enlace que dice Subir, y la de abajo en el de Bajar :)

Responder
Junior

:)

Responder
Juanma Díaz

Buenos días a todos,

lo he probado y no me funciona, creo que en mi plantilla no existe outer-wrapper ni footer-wrapper y ahí estará el problema.

Será que es otro nombre pero no sé cual.

A alguien le ha ocurrido esto?

Muchas gracias.

Un saludo.

Responder
Gem@

:: Juanma Díaz en tu plantilla viene en lugar de footer-wrapper establecido como #footer-outer (para bajar)
Es una de las nuevas plantillas de Blogger todo viene distinto, o casi todo.

Para subir prueba con #menuflotante que es lo que tienes más arriba.

Responder
Juanma Díaz

He conseguido que suba, creo que # hay que ponerlo tras menuflotante en lugar de delante.

Lo que no me funciona es bajar al footer.outer y no sé porqué. Me redirecciona a http://diariodeuntortuguero.blogspot.com/footer-outer#

P.D. antes me había olvidado de poner el script que pones al principio del post, perdón, aunque aún así necesitaba cambiar las palabras que me has dado.

Gema, muchísimas gracias por tu ayuda en todos estos asuntos.

Responder
Gem@

:: No hay de qué Juanma :)

Responder
René Ayerdi

Hola Gema, primero que todo me encanta tu blog, hay muy buena información que podemos aplicar a nuestros blogs.
Hace algún tiempo hice un blog de prueba con este codigo para deslizar hacia arriba y hacia abajo, y me resultó muy bien, es el siguiente www.pruebablogdos.blogspot.com
Ahora resulta que quiero hacer ese mismo efecto pero horizontalmente, he intentado de todo pero no me dá ese efecto de deslizar...
Será que me puedes ayudar en eso? o hay que implementar otro tipo de código?...

Responder
Gem@

:: Pues la verdad si existe ese efecto no sé como se consigue :S

Responder
Juanma Díaz

Perdona Gema, me va genial el subir pero no sé porqué no funciona bajar. He probado cambiando alguna cosa pero no lo consigo. ¿puedes echarme una manilla? No quiero abusar.

Para compensarlo aporto una cosa sobre como insertar los videos en Youtube para que no te los ponga arriba del resto de capas (como hace por defecto). Lo pregunta más arriba HE-MARVEL y aunque seguro que ya lo ha solucionado... lo encontré ayer:

http://www.studiomate.net/blog/problema-z-index-con-videos-de-youtube

HE-MARVEL

Responder
Gem@

:: Hola Juanma ¿por qué no intentas a poner la almohadilla a la izquierda en lugar de la derecha?
#footer-outer
Aquí no se abusa, se pregunta y responde cuando se puede. No hay obligaciones ni compromisos es el tiempo libre de todos :D
Gracias por el aporte ;)

Responder
Juanma Díaz

En ese caso simplemente me sale error y no hace nada la página. Para que subiera tube que ponerlo al final y así si me fué bien.

¿puede ser que este código coja las instrucciones de alguno colgado en la red que ya no funcione? Me refiero a http://www.google.com/jsapi.

La verdad no sé como funciona esto.

De nuevo mil gracias, por otro lado ¿te está gustando como va quedando el blog? Poquito a poco...

Responder
René Ayerdi

Hola Gema, aquí con una duda.
Al momento de dejar un botón de regresar o avanzar en "fixed" la imágen queda estática en la pantalla.
Ahora bien, ¿hay forma de que el position:fixed solo actúe en el contenedor en el que está la imágen?.
Por ejemplo, una página con tres partes (contenedores) uno arriba, uno en medio y uno abajo, y en cada contenedor o parte habrá un botón para regresar o avanzar el cuál se deslize SÓLO en su contenedor.
Gracias anticipadamente.

Responder
Gem@

:: Quizás te refieras a esto René:
http://gemablog-.blogspot.com/2008/02/ir-inicio-en-las-entradas-con-efecto.html

Responder
Juanma Díaz

Hola, solo quiero preguntar la última vez esto antes de darme por vencido y eliminar el botón de que baje, pero me daría mucho coraje porque en el diseño queda muy bien, lo que pasa es que no tengo narices de que funcione. A ver si alguien sabe que hay mal.

Perdón por insistir tanto, soy muy torpe.

Un saludo a todos.

Responder
Gem@

:: Hola Juanma aún así? las nuevas plantillas son capaces de hacer perder la paciencia no está nada claro en ellas y se hace preciso probar una y otra vez hasta solucionar algo.
Es cuestión de probar con todos los div que hay en la parte de abajo por ejemplo con footer-fauxborder-left
No termino de entenderlas de verdad con lo sencillo que es usar una plantilla Minima que se deja hacer lo que uno quiere :S

Responder
Juanma Díaz

No me riñas por dios jejeje, yo no sé mucho de códigos y por eso cuando sale un problema medianamente complicado me cuesta dar con la tecla. Pero me has solucionado el problema y ya sé donde estaba el error.

Hay que ponerle referencia a la id de in div, y en mi plantilla solo había una id (la del menú flotante).

Lo que he hecho es ponerle una id a un div y solucionado.

Yo creía que los id y los class eran lo mismo y resulta que no.

En fín, muchisisisimas gracias por tu ayuda.

Responder
Gem@

:: ¿Reñirte? nooooo nada más lejos ¿acaso piensas que yo lo sé todo? me ocurre como a ti y a todos, cuando yo empecé no sabía que había que cerrar todas las ventanas antes de apagar el ordenador :$ ahora ya he aprendido a cerrar las ventanas :D

Responder
Juanma Díaz

Jajaja, calla, que hoy he visto a mi madre mirando las predicciones meteorológicas por internet, y hace unos años me llamaba corriendo al trabajo para decirme que el ordenador se había encendido cuando limpiaba el polvo junto al ratón.

Responder
Gem@

:: Eso nunca me ocurrió a mi lo de encenderse limpiando y mira que me pasaron cosas extrañas como moverse el cursor solo por toda la pantalla hasta que descubrí que no era brujería sino por las pilas del ratón :)

Responder
Juanma Díaz

Bueno, me refería a cuando la pantalla está en modo ahorro de energía y mueves el ratón y sale el escritorio.

Responder
Gem@

:: En ese caso es comprensible :)

Responder
Marisol

Gema, en mi blog he puesto todo lo que dices que se tiene que hacer pero solo me salen las imágenes y al dar un click en una de ellas ni me baja ni me sube. Qué puedo hacer? Gracias :D

Responder
Marisol

Gema te dejo mi blog para explicarte mejor el problema con el efecto deslizante (beautylipstick.blogspot.com) Cuando puedas miratelo :D

Responder
Gem@

:: Hola Marisol prueba a sustituir footer-wrapper por footer-outer eso para bajar y para subir outer-wrapper por cap-top al ser tu plantilla de las nuevas viene de distinta forma, probemos con eso y si no ya vemos ;)

Responder
Marisol

Siento ser pesada pero he puesto lo que me has dicho y sigue sin irme!

Responder
AttilaGenia

Hola!! Me guta el comentario que pones en el perfil de abajo. Yo ahorita ando con fiebre de blogger. jajajaja Saludos

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top